import { useCallback, useMemo, useState, useEffect } from 'react'

/**
 * CSS变量管理Hook
 * @param varName CSS变量名（不包含--前缀）
 * @param defaultValue 默认值
 * @returns [value, setValue] 当前值和设置函数
 */
export function useCssVar(varName: string, defaultValue?: string) {
  const fullVarName = useMemo(() => `--${varName}`, [varName])
  const [value, setValueState] = useState<string>('')
  
  const getValue = useCallback(() => {
    const computedValue = getComputedStyle(document.documentElement).getPropertyValue(fullVarName)
    // 如果获取到的是空值或变量名，返回默认值
    return computedValue || defaultValue || ''
  }, [fullVarName, defaultValue])
  
  const setValue = useCallback((newValue: string) => {
    document.documentElement.style.setProperty(fullVarName, newValue)
    setValueState(newValue)
  }, [fullVarName])
  
  // 初始化时获取当前值
  useEffect(() => {
    const currentValue = getValue()
    setValueState(currentValue)
  }, [getValue])
  
  return [value, setValue] as const
}

/**
 * 获取CSS变量值
 * @param varName CSS变量名（不包含--前缀）
 * @param defaultValue 默认值
 * @returns CSS变量值
 */
export function getCssVar(varName: string, defaultValue?: string): string {
  const fullVarName = `--${varName}`
  const computedValue = getComputedStyle(document.documentElement).getPropertyValue(fullVarName)
  return computedValue || defaultValue || ''
}

/**
 * 设置CSS变量值
 * @param varName CSS变量名（不包含--前缀）
 * @param value 要设置的值
 */
export function setCssVar(varName: string, value: string): void {
  const fullVarName = `--${varName}`
  document.documentElement.style.setProperty(fullVarName, value)
}

/**
 * 批量设置CSS变量
 * @param vars 变量对象，key为变量名（不包含--前缀），value为变量值
 */
export function setCssVars(vars: Record<string, string>): void {
  Object.entries(vars).forEach(([key, value]) => {
    setCssVar(key, value)
  })
}

/**
 * 批量获取CSS变量
 * @param varNames 变量名数组（不包含--前缀）
 * @returns 变量值对象
 */
export function getCssVars(varNames: string[]): Record<string, string> {
  const result: Record<string, string> = {}
  varNames.forEach(name => {
    result[name] = getCssVar(name)
  })
  return result
} 